<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>两个圆形加载效果</title>

  </head>
  <style>
	  .app{
	    width: 100%;
	    height: 100vh;
	    background-color: #ffffff;
	    position: relative;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	  }
	  .loading64{
	    width: 100px;
	    height: 60px;
	    position: relative;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	  }
	  .circle64{
	    width: 24px;
	    height: 24px;
	    border-radius: 50%;
	    position: absolute;
	    animation: eff64 2s ease-in-out infinite;
	    mix-blend-mode: darken;
	    filter: blur(2px);
	  }
	  .circle64:nth-child(1){
	    background-color: #00FFFF;
	  }
	  .circle64:nth-child(2) {
	    background-color: #FFFF00;
	    animation-delay: 1s;
	  }
	  @keyframes eff64{
	    0%, 50%, 100% {
	      transform: translateX(0)
	    }
	    25% {
	      transform: translateX(70%)
	    }
	    75% {
	      transform: translateX(-70%)
	    }
	  }
  </style>
  <body>
    <div class="app">
      <div class="loading64">
        <div class="circle64"></div>
        <div class="circle64"></div>
      </div>
    </div>
  </body>
</html>